<template>
  <div style="padding-bottom: 40px">
    <van-list
      :finished="finished"
      @load="onLoad"
      finished-text="没有更多了"
      offset="50"
      v-model="loading"
    >
      <!-- <van-cell
        :key="item.id"
        :title="item.stem"
        style="margin: 30px 0"
        v-for="item in list"
      /> -->
      <ArticleItem  v-for="item in list" :key="item.id" :item="item" ></ArticleItem>
  
    </van-list>
  </div>
</template>
<script>
import { CollectLikeApi } from '../api/collectLike'
export default {
  name: '',
  data () {
    return {
      obj: {
        optType: 2,
        pageSize: 8,
        page: 0
      },
      total: 0,
      list: [],
      loading: false,
      finished: false

    }
  },
  created () {
    // this.getData ()
  },
  computed: {
  },
  methods: {
    onLoad () {
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      setTimeout(() => {

      // 数据全部加载完成
      if (this.obj.pageSize * this.obj.page > this.total) {
        this.finished = true;
        return
      }
      
      this.obj.page++
      this.getData()

      // 加载状态结束
      // this.loading = false;

      }, 2000);
    },
    async getData () {
      const res = await CollectLikeApi(this.obj)
      console.log(res);
      this.total = res.data.total
      this.list = [...this.list, ...res.data.rows]
      this.loading = false;
    }
  }
}
</script>
<style lang='less'  scoped>
</style>
